<template>
    <div>
        <el-card class="box-card m_t_15" shadow="hover">
            <div slot="header" class="title">{{isStart == '0' ?'测评说明':'心理测评'}}</div>
            <header class="header text-c" v-if="isStart == '0'">
                <!-- <el-avatar shape="square" class="avatar" :src="data.avatar" /> -->
                <div class="course-info">
                    <p class="title" style="padding-top: 20px">{{data.name}}</p>
                    <p class="p_top" style="font-size: 16px;padding-top: 30px">{{data.introduction}}</p>
                    <p class="p_top" style="padding-top: 20px">
                        <el-button type="primary" @click="changeIsStart">开始测试</el-button>
                    </p>
                </div>
            </header>
            <header class="header" v-if="isStart == '1'">
                <p class="text_size_18">
                    题目：
                    <span class="text_color_429688">{{evaluationData.count}}</span>
                    <span>/{{evaluationData.total}}</span>
                </p>
                <div class="m_t_15">
                    <span class="text_color_429688">{{evaluationData.count}}、</span>
                    <span>{{evaluation.tite}}</span>
                </div>
                <div class="m_t_15">
                    <el-radio v-for="(value, key) in evaluation.option" v-model="radio" :label="key" border>{{value}}</el-radio>
                </div>
                <div class="m_t_15 text-c">
                    <el-button v-if="evaluationData.count == evaluationData.total" type="primary" @click="ok">提交</el-button>
                    <el-button v-else type="primary" @click="nextPage">下一题</el-button>
                </div>
            </header>
            <header class="header text-c" v-if="isStart == '2'">
                测评结果
            </header>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            page: { page: 1, size: 10, total: 4 },
            isStart: '0',
            radio: '1',
            evaluationData: {
                count: 1,
                total: 2,
                data: [
                    { id: '1', tite: '感到神经过敏，心中不踏实', option: { '1': '没有', '2': '很轻', '3': '中等', '4': '偏重', '5': '严重' } },
                    { id: '2', tite: '头脑中有不必要的想法或字句盘旋', option: { '1': '没有', '2': '很轻', '3': '中等', '4': '偏重', '5': '严重' } }
                ]
            },
            data: {
                id: '1',
                name: 'SCL90自评量表在线测试',
                introduction:
                    '《症状自评量表SCL90》是世界上最著名的心理健康测试量表之一，是当前使用最为广泛的精神障碍和心理疾病门诊检查量表，将协助您从十个方面来了解自己的心理健康程度。说明：下面有90条测验项目，列出了有些人可能会有的问题，请仔细地阅读每一条，然后根据最近一星期以内，您的实际感觉，选择适合的答案。',
                avatar: 'https://img.ydlcdn.com/file/2020/01/09/de36uzljrp0icccr.jpg'
            }
        };
    },
    computed: {
        evaluation() {
            return this.evaluationData.data[this.evaluationData.count - 1];
        }
    },
    created() {},
    mounted() {},
    methods: {
        changeIsStart() {
            this.isStart = '1';
        },
        nextPage(){
            this.radio = '1'
            this.evaluationData.count++
        },
        ok(){
            this.isStart = '2';
        }
    }
};
</script>

<style lang="less" scoped>
.avatar {
    width: 220px;
    height: 220px;
}
.text-c {
    text-align: center;
}
.course-info {
    width: 600px;
    margin: 0 auto;
}
</style>